import Taro, {Component} from "@tarojs/taro";
import {View, Image} from "@tarojs/components";
import {getRuntime,servicePhoneNumber,getAvatar} from "../../utils/common";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import './index.less'

import right from "../../assets/img/right.png";
import bg_14 from "../../assets/img/bg_14.png";
import icon_75 from "../../assets/img/icon_75.png"
import icon_76 from "../../assets/img/icon_76.png";
import icon_77 from "../../assets/img/icon_77.png";
import icon_78 from "../../assets/img/icon_78.png";
import Tabbar from "../../components/Tabbar";

// 我的
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer

class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    userInfo: {},
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的' })
    let userInfo = getRuntime().getUserInfo()
    if(!userInfo) {getRuntime().navigateTo('/pages/login/login'); return}
    this.getUserInfoFromHost()
  }

  componentDidShow(): void {
    this.getUserInfoFromHost()
  }

  getUserInfoFromHost() {
    let { userStore } = this.props.stores
    userStore.getUserInfo({
      callback: res => {
        // getRuntime().setStorage('user', res) // 此处返回的信息未带token
        this.setState({
          userInfo: res,
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  makePhone() {
    getRuntime().makePhoneCall(servicePhoneNumber)
  }

  render() {
    let { userInfo } = this.state
    enum memberType { '普通用户', 'VIP会员','代理商','合伙人' }
    return (
      <View className='my-my'>
        <Image src={bg_14} className='my-bg' />

        <View className='list-21'>
          <View className='list-21-item'>
            <Image src={getAvatar(userInfo.avatar)} className='img' onClick={this.handelRouter.bind(this,'/pages/user/user_info_edit')}/>
            <View className='info' onClick={this.handelRouter.bind(this,'/pages/user/user_info_edit')}>
              <View className='list-title'>{userInfo.name}</View>
              <View className='list-info'>查看和编辑个人资料</View>
              <View className='list-info' style={{color:'#fece8e'}}>{memberType[userInfo.agencyLevel]}</View>
            </View>
            <View className='r' onClick={this.handelRouter.bind(this, '/pages/user/sign')}>
              早起打卡
            </View>
          </View>
        </View>

        <View className='wrap-box team-integral-wrap'>
          <View className='team-integral'>
            <View className='item' onClick={this.handelRouter.bind(this, '/pages/user/my_profit')}>
              <View className='list-desc'>
                <View>我的收益</View>
                <Image src={right} className='img icon-drop-down'/>
              </View>
              <View className='money'>￥{userInfo.commision}</View>
            </View>

            <View className='item' onClick={this.handelRouter.bind(this, '/pages/user/team')}>
              <View className='list-desc'>
                <View>我的团队</View>
                <Image src={right} className='img icon-drop-down'/>
              </View>
              <View className='money'>{userInfo.teamCount}</View>
            </View>

            <View className='item' onClick={this.handelRouter.bind(this, '/pages/user/integral?totalPoints='+userInfo.points)}>
              <View className='list-desc'>
                <View>我的积分</View>
                <Image src={right} className='img icon-drop-down' />
              </View>
              <View className='money'>{userInfo.points}</View>
            </View>
          </View>
        </View>

        <View className='wrap-box my-from'>
          <View className='item-group'>
            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/issue')}>
              <View className='list-title'>我的发布</View>
              <View className='list-desc'>{userInfo.myReleaseCount}
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/apply_log')}>
              <View className='list-title'>我的申请</View>
              <View className='list-desc'>{userInfo.myApplyCount}
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>
          </View>
        </View>

        <View className='wrap-box'>
          <View className='item-group nav-wrap'>
            <View className='nav' onClick={this.handelRouter.bind(this, '/pages/user/upgrade')}>
              <Image src={icon_75} className='img img1' />
              <View className='list-title'>会员升级</View>
            </View>
            <View className='nav' onClick={this.handelRouter.bind(this, '/pages/user/qrcode')}>
              <Image src={icon_76} className='img img2' />
              <View className='list-title'>我要赚钱</View>
            </View>
            <View className='nav' onClick={this.handelRouter.bind(this, '/pages/user/bank_card')}>
              <Image src={icon_77} className='img img3'/>
              <View className='list-title'>银行卡</View>
            </View>
            <View className='nav' onClick={this.handelRouter.bind(this, '/pages/user/address')}>
              <Image src={icon_78} className='img img4' />
              <View className='list-title'>收货地址</View>
            </View>
          </View>



        </View>
        <View className='wrap-box my-from'>

          <View className='item-group'>
            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/course')}>
              <View className='list-title'>我的课程</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down'/>
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/order')}>
              <View className='list-title'>商城订单</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/finance/financeQuery')}>
              <View className='list-title'>保函查询</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/collection')}>
              <View className='list-title'>我的收藏</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down'/>
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/public_welfare/welfare_record')}>
              <View className='list-title'>我的公益</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down'/>
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/company_auth')}>
              <View className='list-title'>企业认证</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down'/>
              </View>
            </View>
          </View>

        </View>

        <View className='my-from'>

          <View className='item-group my-from'>
            <View className='line'>
              <View className='list-title'>客服热线</View>
              <View className='list-desc' onClick={this.makePhone.bind(this)}>
                {servicePhoneNumber}
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/help')}>
              <View className='list-title'>帮助中心</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/other/regist_agreement')}>
              <View className='list-title'>服务协议</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/setting')}>
              <View className='list-title'>设置</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>
          </View>
        </View>

        <View className='from-footer'>技术支持：西部硅谷</View>

        <View style={{height: '15px'}} />

        <Tabbar currentTab='user' />
      </View>
    )
  }
}

export default Index
